<template>
	<view>
		<view style="background-color: #fff;">
			<view style="height: 170upx;border-radius: 0upx 0upx  375upx 375upx/ 0 0 38upx 38upx;background-image: url(https://656d-emons-b55l8-1301426740.tcb.qcloud.la/user_bg1.png?sign=7b1dd0cba33fb3f8a710ad9ec60fa262&t=1598088087);background-size: 100% auto;">
				<view class="user-info-box">
					<view class="portrait-box">
						<image class="portrait" :src="avatar" v-if="avatar"></image>		
					</view>
					<view v-if="!avatar">
						<u-button size="mini" type="warning" @click="jumpto_login">点击登录</u-button>
					</view>
					<view class="info-box" style="width: 500upx;">
						<view class="userid" v-if="phone">
							{{nickname}}
						</view>
						<text class="username" v-if="phone">{{phone}}</text>
					</view>
				</view>
			</view>
		</view>
		
		<view class="nav">
			<view class="cont clear" style="margin:0 10%;">
				<view class="list" style="width: 33%;" v-for="(item,index) in order" :key="index" @click="jump" :data-src="item.src">
					<image :src="item.icon" mode=""></image>
					<text>{{item.text}}</text>
					<!-- <uni-badge :text="item.badge" type="danger" v-if="item.badge > 0"></uni-badge> -->
				</view>
			</view>
		</view>
		
		<view class="u-m-t-20">
			<u-cell-group>
				<u-cell-item icon="rmb-circle" title="我的订单" @click="jumpto_orderlist"></u-cell-item>
				<u-cell-item icon="coupon" title="我的钱包" @click="jumpto_wallet"></u-cell-item>
			</u-cell-group>
		</view>
		
		<!-- <view class="u-m-t-20">
			<u-cell-group>
				<u-cell-item icon="star" title="收藏"></u-cell-item>
				<u-cell-item icon="photo" title="相册"></u-cell-item>
				<u-cell-item icon="heart" title="卡券"></u-cell-item>
			</u-cell-group>
		</view> -->
		
		<view class="u-m-t-20">
			<u-cell-group>
				<u-cell-item icon="account-fill" title="商家入驻" @click="jumpto_settle"></u-cell-item>
			</u-cell-group>
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				res:[],
				phone:'',
				avatar:'',
				nickname:'',
				order:[{
					text: '拼团中',
					icon:'../../static/order1.png',
					src:'../order/order?index=0',
					badge: 0
				},{
					text: '拼团完成',
					icon:'../../static/order2.png',
					src:'../order/order?index=1',
					badge: 0
				},{
					text: '已核销',
					icon:'../../static/order3.png',
					src:'../order/order?index=2',
					badge: 0
				}],
				active:"active",
			};
		},
		onShow:function(){
			uni.getStorage({
				key: 'phone',
				success: (res) => {
					this.phone = res.data
				},
			});
			uni.getStorage({
				key: 'nickname',
				success: (res) => {
					this.nickname = res.data
				},
			});
			uni.getStorage({
				key: 'avatar',
				success: (res) => {
					this.avatar = res.data
				},
			});
		},
		methods:{
			setAjax(){
				uni.hideLoading()
			},
			jumpto_orderlist () {
				uni.navigateTo({
					url: '../order/order?index=0'
				});
			},
			jumpto_wallet () {
				uni.navigateTo({
					url: '../wallet/wallet'
				});
			},
			jumpto_login () {
				uni.navigateTo({
					url: '../login/login'
				});
			},
			jumpto_settle () {
				uni.navigateTo({
					url: '../settle/settle'
				});
			},
			jump(e){
				uni.navigateTo({
					url: e.currentTarget.dataset.src
				});
			},
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #F8F8F8;
	}
	.user-info-box{
		color: #000;
		height: 130upx;
		display:flex;
		align-items:center;
		position:relative;
		z-index: 1;
		padding-top: 40upx;
		padding-left: 40upx;
		.portrait{
			width: 100upx;
			height: 100upx;
			border:5upx solid #fff;
			border-radius: 50%;
		}
		.username{
			width: 500upx;
			/* color: $font-color-dark; */
			margin-left: 20upx;
		}
		.userid {
			margin-left: 20upx;
		}
	}
	.nav {padding-top:40upx;background:#fff;height: 180upx;}
	.nav .top {border-bottom:1px solid #f5f5f5;}
	.nav .top .uni-list {margin:0;}
	.nav .cont {background:#fff;}
	.nav .cont .list {float:left;width:25%;padding:0 0 28upx;position:relative;}
	.nav .cont .list:nth-child(2) image {border-left: 4upx solid #f3f3f3;border-right: 4upx solid #f3f3f3;}
	.nav .cont .list image {width:80upx;height:80upx;display:block;padding: 0 52upx;}
	.nav .cont .list text {text-align:center;display:block;font-size:26upx;margin-top:10upx;}
	.nav .uni-badge {position:absolute;top:4upx;right:40upx;background:#f55;}
	.uni-list-cell.active {background:#f5f5f5;}
	.uni-list image {width:34upx;height:34upx;}
	.uni-list .text {position:absolute;left:84upx;font-size:30upx;color: #444;}
	.uni-list {margin-top:20upx;border-radius: 15upx;}
	.uni-list:before,.uni-list:after {display:none;}
	.uni-list-cell:after {content:" ";position:absolute;left:0.5rem;right:0.5rem;bottom:-1px;height:1px;border-top:1px solid #ebebeb;color:#D9D9D9;-webkit-transform-origin:0 0;-ms-transform-origin:0 0;transform-origin:0 0;-webkit-transform:scaleY(0.5);-ms-transform:scaleY(0.5);transform:scaleY(0.5);background:none;}
	.uni-list-cell .right {font-size:24upx;color:#999;margin-right:20upx;}
	.uni-list .uni-list-cell:last-child:after {border:0;}
	.uni-list .uni-badge {margin-right:15px;background-color:#f55;}
</style>
